<template>
	<!-- nav-bar为小程序一级页面ttile -->
	<view class="layout">
		<view class="navbar">
			<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
			
			
			<view class="titleBar" :style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}">
				 <view class="goBack" @click="goRouter()">
						<wd-icon name="thin-arrow-left" size="12px"></wd-icon>
				 </view>
				 <text class="title">{{title}}</text>
			</view>
		</view>
		
		<view class="fill" :style="{height:getNavBarHeight()+'px'}">
			
		</view>
		
		<wd-toast />
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight,getLeftIconLeft} from "@/utils/system.js"
import { useToast } from '@/uni_modules/wot-design-uni'

defineProps({
	title:{
		type:String,
		default:"壁纸"
	}
})

const toast = useToast()

const goRouter = ()=>{
	uni.navigateBack({})
}

</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		z-index: 10;
		// height: 44px;
		background: linear-gradient( 135deg, #435EF5 0%, #68B1F9 100%);
		box-shadow: 0px 2px 10px 0px rgba(58,133,255,0.8);
		// background:
		// linear-gradient(to bottom,transparent,#fff 400px),
		// radial-gradient(90% 300px at left top, #C8DEFF, transparent),
		// radial-gradient(60% 300px at right top, #76ACFF, transparent);
		.statusBar{}
		.titleBar{
			display: flex;	
			align-items: center;
			padding:0 30rpx;
			justify-content: center;
			position: relative;
			.goBack{
				position: absolute;
				left: 20rpx;
				width: 70rpx;
				height:50rpx;
				// border: 1px solid #f40;
				display: flex;
				justify-content: center;
				align-items: center;
				// color: $text-font-color-1;
				color: #fff;
			}
			.title{
				font-size: 30rpx;
				font-weight: 700;
				// color: $text-font-color-1;
				color: #fff;
			}
		}
	}
}
</style>